<script>
import {listGroups} from "../../api/group";
import {listTypes} from "../../api/dict";
import {uploadResource} from "../../api/file";
import {ElMessage} from "element-plus";
import {detailResource} from "../../api/resource";

export default {
    name: "ShareResource",
    data() {
        return {
            progress:0,
            fileList: [],
            deleteVisible: false,
            resource: {
                title: '',
                tag: [],
                groupId: [],
                typeId: null,
                summary: ''
            },
            inputVisible: false,
            inputValue: '',
            options: [],
            groups: [],
            types: [],
            props: {
                lazy: true,
                value: 'id',
                label: 'name',
                emitPath: false,
                lazyLoad(node, resolve) {
                    const {level, value} = node

                    if (level === 0) {
                        listTypes(0,"resType")
                            .then(res => {
                                resolve(res.data)
                            })
                    } else {
                        listTypes(value,"resType")
                            .then(res => {
                                resolve(res.data)
                            })
                    }

                },
            },
        }
    },
    computed: {
        user() {
            return this.$store.state.userInfo;
        }
    },
    methods: {
        handleChange(file, fileList) {
            if (fileList.length > 1)
                fileList.splice(0, 1)
            this.fileList = fileList
        },
        handleRemove(file) {
            this.fileList = []
            this.$refs.upload.handleRemove(file)
        },
        isImage(name, url) {
            var i = name.lastIndexOf('.')
            var type = ['webp', 'bmp', 'pcx', 'tif', 'gif', 'jpeg', 'jpg', 'tga', 'exif', 'fpx', 'svg', 'psd', 'cdr', 'pcd', 'dxf', 'ufo', 'eps', 'ai', 'png', 'hdri', 'raw', 'wmf', 'flic', 'emf', 'ico', 'avif', 'apng']
            var ext = name.substr(i + 1)
            for (var obj in type) {
                if (ext.toLowerCase() === type[obj]) {
                    return url;
                }
            }
            return '/img/unknown_type_s.svg'
        },
        uploadImage(param) {
            const formData = new FormData()
            this.resource.ownerId = this.user.userId
            if (param != null)
                formData.append('file', param.file)
            formData.append("resource", JSON.stringify(this.resource))
            uploadResource(formData,e=>{this.progress = (e.loaded / e.total * 100 | 0)})
                .then(res => {
                    if (res.code === 200){
                        ElMessage.success("分享成功");
                        this.$router.back()
                    }

                    else ElMessage.error("分享失败")
                })

        },
        onUploadProgress(e){
            this.progress = (e.loaded / e.total * 100 | 0)
        },
        /*tag*/
        handleClose(tag) {
            this.resource.tag.splice(this.resource.tag.indexOf(tag), 1)
        },

        showInput() {
            this.inputVisible = true
            this.$nextTick((_) => {
                this.$refs.saveTagInput.$refs.input.focus()
            })
        },

        handleInputConfirm() {
            const inputValue = this.inputValue
            if (inputValue) {
                this.resource.tag.push(inputValue)
            }
            this.inputVisible = false
            this.inputValue = ''
        },

        submit() {
            if (this.fileList.length !== 0) {
                this.$refs.upload.submit();
            } else this.uploadImage(null)
        },
        getGroups() {
            listGroups(this.user.userId)
                .then(res => {
                    this.groups = res.data;
                })
        },
        init() {
            const id = this.$route.query["id"]
            if (id) {
                detailResource(id)
                    .then(res => {
                        if (res.code === 200) {
                            this.resource = res.data
                            this.resource.tag = JSON.parse(this.resource.tag)
                        }
                    })
            }
        }

    },
    mounted() {
        this.getGroups();
        this.init();
    }
}
</script>
<template>
    <div class="flex row align-center center share">
        <div class="flex column align-center upload-box">
            <div style="width: 100%">
                <h2>上传资源</h2>
                <el-divider style="margin: 0 0 10px 0;!important;"/>
            </div>
            <div class="flex column align-center" style="width: 70%;height: 100%">
                <div style="width: 100%">

                    <el-upload
                        class="upload-div"
                        :thumbnail-mode="true"
                        list-type="picture"
                        :file-list="fileList"
                        :auto-upload="false"
                        ref="upload"
                        :http-request="uploadImage"
                        drag
                        :on-change="handleChange"
                        action="#">
                        <div class="flex center align-center" style="height: 60px">
                            <i class="iconfont icon-cloud-upload" style="font-size: 49pt;color: #304455"/>
                        </div>
                        <div class="el-upload__text">
                            将文件拖到此处，或点击 <em>上传文件</em>
                        </div>
                        <template #file="{ file }">
                            <div @mouseenter="deleteVisible=true"
                                 @mouseleave="deleteVisible=false"
                                 class="flex align-center row space-between">
                                <div class="flex align-center row" style="width: 100%">
                                    <img class="el-upload-list__item-thumbnail" :src="isImage(file.name,file.url)"
                                         alt=""/>
                                    <div class="flex column space-between" style="height: 60px;width: 90%">
                                        <span><b>{{ file.name }}</b></span>
                                        <el-progress :text-inside="true" :stroke-width="16"  :percentage="progress" status="success"  />
                                    </div>

                                </div>
                                <i v-if="deleteVisible" @click="handleRemove(file)" class="iconfont icon-backdelete delete-btn"/>
                            </div>

                        </template>
                    </el-upload>
                    <div class="flex row center align-center el-upload__tip" style="height: 110px;width: 100%">
                        支持 图片、文档、压缩包等格式文件
                    </div>
                </div>

                <!--            其他信息-->
                <el-divider/>
                <div class="flex row center align-center mb-20" style="width: 100%">
                    <span style="width: 90px">资源标题:</span>
                    <el-input v-model="resource.title" placeholder="分类+属性+人群指向+长尾词"/>
                </div>
                <div class="flex row center mb-20" style="width: 100%">
                    <span style="width: 90px">资源描述:</span>
                    <el-input v-model="resource.summary"
                              placeholder="请简要介绍资源所涵盖的内容要点，使用场景及适用人群，好的简介能够最大限度的提高资源的吸引力，增加用户下载哦！" type="textarea"/>
                </div>

                <div class="flex row align-center mb-20" style="width: 100%">
                    <span style="width: 90px">所属分类:</span>
                    <el-cascader
                        v-model="resource.typeId"
                        style="width: 100%"
                        :props="props"
                        placeholder="选择资料类别"
                    />
                </div>
                <div class="flex row center align-center mb-20" style="width: 100%">
                    <span style="width: 90px">资源分组:</span>
                    <el-select
                        v-model="resource.groupId"
                        filterable
                        allow-create
                        default-first-option
                        style="width: 100%"
                        placeholder="选择或输入分组名称"
                    >
                        <el-option
                            v-for="item in groups"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        >
                        </el-option>
                    </el-select>
                </div>
                <!--            添加标签-->
                <div class="flex row align-center mb-20" style="width: 100%">
                    <span style="width: 90px">资源标签:</span>
                    <div style="width: 100%">
                        <el-tag v-for="tag in resource.tag" :key="tag" closable :disable-transitions="false"
                                @close="handleClose(tag)">{{ tag }}
                        </el-tag>
                        <el-input v-if="inputVisible" ref="saveTagInput" v-model="inputValue" class="input-new-tag"
                                  size="mini" @keyup.enter="handleInputConfirm" @blur="handleInputConfirm"></el-input>
                        <el-button v-else class="button-new-tag" size="small" @click="showInput">添加标签</el-button>
                    </div>
                </div>
                <div class="flex row align-center flex-end mb-20" style="width: 100%">
                    <el-button @click="submit" class="commit">提交</el-button>
                </div>
            </div>
        </div>
        <!--        右边其他区域 暂时不用-->
        <!--        <div class="flex column align-center" style="height: 100%;width: 20%;background: #6e0841;padding: 0 30px">
                </div>-->
    </div>
</template>

<style scoped>
.commit {
    width: 130px;
    border-radius: 20px;
    border: 0;
    background: #ff2f00;
    color: white;
    font-size: 13pt;
}

.commit:hover {
    background: #d22203;
}

.mb-20 {
    margin-bottom: 30px;
}

.share {
    height: 100%;
    width: 100%
}

.upload-box {
    margin: 30px 10px;
    height: calc(100% - 60px);
    width: calc(70% - 10px);
    background: white;
    padding: 0 60px;
    border-radius: 15px;
    overflow-y: auto;
    box-shadow: 0 2px 13px 0 rgba(0, 0, 0, 0.1);
}

.upload-div {
    width: 100%;
    height: 90px;
    border-radius: 15px;
}

:deep(.el-upload) {
    width: 100%;
}

:deep(.el-upload-dragger) {
    width: 100%;
    height: 90px;
}

.el-icon--upload {
    width: 100%;
    height: 60px;
    color: #304455;
}

.delete-btn {
    font-size: 25pt;
    cursor: pointer;
}

.delete-btn:hover {
    color: #9d0000;
}

.el-tag {
    height: 33px;
    margin-right: 10px;
}

.button-new-tag {
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
}

.input-new-tag {
    width: 90px;
    height: 32px;
    vertical-align: bottom;
}
</style>
